<template>
  <div class="Vheader primaryColor">
    <div class="flexBox">
        <Theme class=""></Theme>
      <i style="margin:0 20px;" @click="changeIsCollapse" v-if="isCollapse" class="el-icon-s-fold"></i>
      <i style="margin:0 20px;" @click="changeIsCollapse" v-else class="el-icon-s-unfold"></i>
      <span style="font-size:34px;">朱酱的后台管理系统</span>
      <!-- 全屏 -->
    </div>

    <div class="flexBox">
      <rank style="margin-right:20px;"></rank>
      <el-dropdown style="margin-right:20px;" :hide-on-click="false">
        <span class="el-dropdown-link">
          <i class="el-icon-bell el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-image
        style="width: 45px; height: 45px;border-radius: 50%;margin-right:20px;"
        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
      ></el-image>
      <el-dropdown style="margin-right:20px;" @command="adminCommand">
        <span class="el-dropdown-link" style="color:white">
          admin
          <i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import rank from "./FullScreen";
import Theme from './Theme'
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: { rank,Theme },
  data() {
    return {};
  },
  computed: {
    isCollapse() {
      return this.$store.state.isCollapse;
    }
  },
  watch: {},
  methods: {
    changeIsCollapse() {
      this.$store.commit("changeIsCollapse");
    },
    adminCommand(command){
      if( command == 'logout' ){
        this.$message.success('退出用户成功')
        this.$router.push('/')
      }
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {}
};
</script> 
<style lang='scss' scoped>
.Vheader {
//   background: #07c4a8;
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flexBox {
  display: flex;
  align-items: center;
}
i {
  font-size: 35px;
}
.el-icon-bell,.el-icon-caret-bottom {
  font-size: 23px;
  color: #fff;
}
</style>
